<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta  name="description"  content="健管报告" /> 
    <meta  property="og:description" content="健管报告"   />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>健管报告</title>
    <!-- 引入 vant UI 组件库样式文件 -->
    <link rel="stylesheet" href="../common/css/vant-index.css" />
    <link rel="stylesheet" type="text/css" href="../common/css/common.css"/>
    <link rel="stylesheet" type="text/css" href="./css/report.css"/>
    <style>
        
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <van-nav-bar title="健管报告" left-text="返回" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
            <template #right>
                <van-icon name="wap-home-o" size='18' />
            </template>
        </van-nav-bar>
        <div class="main-box">
            <div class="report-box">
                <div class="report-box-title">
                    <div>
                        <i></i>
                        <span>首诊报告</span>
                    </div>
                </div>
                <div v-if="first&&first.reportName" class="report-content-box">
                    <div class="box-item" @click="linkToReportDetail">
                        <img class="item-img" src="./img/report/report.png" />
                        <div>
                            <span>{{first.reportName}}</span>
                            <span>{{`报告时间：${first.reportCreateTime}`}}</span>
                        </div>
                    </div>
                </div>
                <div v-else class="empty-box"><van-empty image="img/report/empty.png" description="当前没有周报告哦～" /></div>
            </div>
            <div class="report-box">
                <div class="report-box-title">
                    <div>
                        <i></i>
                        <span>周报告</span>
                    </div>
                    <div>
                        <span @click="handleWeekShow">{{searchMonthTxt}}</span>
                        <i></i>
                        <van-popup v-model:show="weekShow" position="bottom">
                            <van-datetime-picker
                                v-model="searchMonth"
                                type="year-month"
                                title="年/月"
                                :formatter="formatter1"
                                :default-index="0"
                                :min-date="minDate"
                                :max-date="maxDate"
                                @cancel="onCancel"
                                @confirm="onConfirm1"
                            />
                        </van-popup>
                    </div>
                </div>
                <div v-if="week" class="report-content-box">
                    <div ref="contentBox" class="content-box">
                        <div v-for="item in week" class="box-item" @click="linkToReportDetail">
                            <img class="item-img" src="./img/report/report.png" />
                            <div>
                                <span>{{item.reportName}}</span>
                                <span>{{`报告时间：${item.reportCreateTime}`}}</span>
                            </div>
                        </div>
                    </div>
                    <div v-if="week.length > 1" class="item-switch" @click="handleWeekSwitch">
                        <img ref="weekUp" src="./img/report/up.png"></img>
                        <span>{{weekSwitch ? '收起': '展开'}}</span>
                    </div>
                </div>
                <div v-else class="empty-box"><van-empty image="img/report/empty.png" description="当前没有周报告哦～" /></div>
            </div>
            <div class="report-box">
                <div class="report-box-title">
                    <div>
                        <i></i>
                        <span>月报告</span>
                    </div>
                    <div>
                        <span @click="handleMonthShow">{{searchYearTxt}}</span>
                        <i></i>
                        <van-popup v-model:show="monthShow" position="bottom">
                            <van-picker
                                title="年"
                                :columns="yearList"
                                :columns-field-names="customFieldName"
                                @cancel="onCancel"
                                @confirm="onConfirm2"
                            />
                        </van-popup>
                    </div>
                </div>
                <div v-if="month" class="report-content-box">
                    <div ref="monthBox" class="content-box">
                        <div v-for="item in month" class="box-item" @click="linkToReportDetail">
                            <img class="item-img" src="./img/report/report.png" />
                            <div>
                                <span>{{item.reportName}}</span>
                                <span>{{`报告时间：${item.reportCreateTime}`}}</span>
                            </div>
                        </div>
                    </div>
                    <div v-if="month.length > 1" class="item-switch" @click="handleMonthSwitch">
                        <img ref="monthUp" src="./img/report/up.png"></img>
                        <span>{{monthSwitch ? '收起': '展开'}}</span>
                    </div>
                </div>
                <div v-else class="empty-box"><van-empty image="img/report/empty.png" description="当前没有月报告哦～" /></div>
            </div>
            <div class="report-box">
                <div class="report-box-title">
                    <div>
                        <i></i>
                        <span>总结报告</span>
                    </div>
                </div>
                <div v-if="total&&total.reportName" class="report-content-box">
                    <div class="box-item" @click="linkToReportDetail">
                        <img class="item-img" src="./img/report/report.png" />
                        <div>
                            <span>{{total.reportName}}</span>
                            <span>{{`报告时间：${total.reportCreateTime}`}}</span>
                        </div>
                    </div>
                </div>
                <div v-else class="empty-box"><van-empty image="img/report/empty.png" description="当前没有总结报告哦～" /></div>
            </div>

        </div>
    </div>
</body>
<!-- 上线环境用 -->
<script src="../common/js/vue.global.prod.js"></script>
<!-- 引入 UI 组件库 -->
<script src="../common/js/vant.min.js"></script>
<!-- axios 接口调用 -->
<script src="../common/js/axios.min.js"></script>
<script src="../common/js/rem.js"></script>
<script src="../base.js"></script>

<script type="module">
    import {
        getAction,
        postAction,
        getUrl,
    } from "../common/js/api/vue3-axios-utils.js";
    const baseInfo = {
        data() {
            return {
                first: {},
                week: [],
                month: [],
                url: '/patient/report/index',
                total: {},
                searchMonth: '',
                searchYear: '',
                postMonth: '',
                weekSwitch: true,
                monthSwitch: true,
                weekShow: false,
                monthShow: false,
                minDate: new Date(1920, 0, 1),
                maxDate: new Date(),
                yearList: []
            }
        },
        computed: {
            searchMonthTxt() {
                var d = new Date(this.searchMonth);
                var y = d.getFullYear()
                var m = d.getMonth() + 1
                m = m < 10 ? ('0' + m) : m
                return y + '年' + m + '月'
            },
            searchYearTxt() {
                return this.searchYear + '年'
            }
        },
        created() {
            this.getYearList()
            this.searchMonth = new Date()
            this.searchYear = new Date().getFullYear()
            this.fetchData()
        },
        methods: {
            fetchData() {
                const patientId = localStorage.getItem('pid') || 351   //351测试id
                const params = {
                    patientId,
                    queryDateMonth: this.searchYear,
                    queryDateWeek: this.postMonth
                }
                let url = getUrl() + this.url;
                postAction(url, params).then((res) => {
                    if (res.data.success) {
                        const {reportFirst, reportMonth, reportWeek, reportSummary} = res.data.result
                        this.first = reportFirst
                        this.week = reportWeek
                        this.month = reportMonth
                        this.total = reportSummary
                        this.$nextTick(() => {
                            this.week&&(this.$refs.contentBox.style.height = this.week.length * 1.43+'rem')
                            this.month&&(this.$refs.monthBox.style.height = this.month.length * 1.43+'rem')
                        })
                    }
                })
            },
            getYearList() {
                for(var i = Number(new Date().getFullYear()); i >= 1970; i--) {
                    this.yearList.push(
                        {text: `${i}年`, value: i}
                    )
                }
            },
            handleWeekShow() {
                this.weekShow = true
            },
            handleMonthShow() {
                this.monthShow = true
            },
            onCancel() {
                this.weekShow = false
                this.monthShow = false
            },
            onConfirm1(value) {
                var d = new Date(value);
                var y = d.getFullYear()
                var m = d.getMonth() + 1
                var d1 = d.getDate()
                m = m < 10 ? ('0' + m) : m
                const time = y +'-'+ m
                this.postMonth = time
                this.weekShow = false
                this.fetchData()
            },
            onConfirm2(item) {
                this.searchYear = item.value
                this.monthShow = false
                this.fetchData()
            },
            handleWeekSwitch() {
                if (this.weekSwitch) {
                    this.$refs.contentBox.style.transition = 'height 0.5s'
                    this.$refs.contentBox.style.height = 1.43+'rem'
                    this.$refs.contentBox.style.overflow = 'hidden'
                    this.$refs.weekUp.style.transform = 'rotate(180deg)'
                    this.weekSwitch = false
                } else {
                    this.$refs.contentBox.style.transition = 'height 0.5s'
                    this.$refs.contentBox.style.height = this.week.length * 1.43+'rem'
                    this.$refs.contentBox.style.overflow = 'hidden'
                    this.$refs.weekUp.style.transform = 'rotate(360deg)'
                    this.weekSwitch = true
                }
            },
            handleMonthSwitch() {
                if (this.monthSwitch) {
                    this.$refs.monthBox.style.transition = 'height 0.5s'
                    this.$refs.monthBox.style.height = 1.43+'rem'
                    this.$refs.monthBox.style.overflow = 'hidden'
                    this.$refs.monthUp.style.transform = 'rotate(180deg)'
                    this.monthSwitch = false
                } else {
                    this.$refs.monthBox.style.transition = 'height 0.5s'
                    this.$refs.monthBox.style.height = this.week.length * 1.43+'rem'
                    this.$refs.monthBox.style.overflow = 'hidden'
                    this.$refs.monthUp.style.transform = 'rotate(360deg)'
                    this.monthSwitch = true
                }
            },
            formatter(type, val) {
                if (type === 'year') {
                  return `${val}年`;
                } else if (type === 'month') {
                  return `${val}月`;
                }
                return val;
            },
            postData() {
                window.location.href = "../index.html"
            },
            onClickLeft() {
                history.back()
            },
            onClickRight() {
                window.location.href = "./index.html"
            },
            linkToReportDetail(){
            		window.location.href = "./healthRecord/recordDetail.html"
            }
        },
    };

    const app = Vue.createApp(baseInfo);

    app.use(vant);
    // 通过 CDN 引入时不会自动注册 Lazyload 组件
    // 可以通过下面的方式手动注册
    app.use(vant.Lazyload);  
    app.use(vant.Popup);  

    // 调用函数组件，弹出一个 Toast
    // vant.Toast("刷新成功");
    app.mount("#app");
</script>

</html>
